<template>
	<view class="holdon" :style="style">
<!-- 		<view @tap='share()'  class="ball" :style="'left:'+(moveX == 0 & x>0? x+'%':moveX+'px')+';top:'+(moveY == 0 & y>0? y+'%':moveY+'px')"
				@touchstart="drag_start" @touchmove.prevent="drag_hmove">
				<image :src="image" mode="aspectFit"></image>
		</view> -->
		<view @tap="shares()"  class="ball" :style="'left:'+(moveX == 0 & x>0? x+'%':moveX+'px')+';top:'+(moveY == 0 & y>0? y+'%':moveY+'px')">
				<image :src="image" mode="aspectFit"></image>
		</view>
	</view>
</template>
 
<script>
	export default {
		props: {
			x: {
				type: Number,
				default:0
			},
			y: {
				type: Number,
				default:0
			},
			image:{
				type:String,
				default: ''
			}
		},
		data() {
			return {
				start:[0,0],
				moveY:0,
				moveX:0,
				windowWidth:'',
				windowHeight:'',
				style:"display:none"
			}
		},
		mounted() {
			const { windowWidth, windowHeight } = uni.getSystemInfoSync();	
			this.windowWidth = windowWidth
			this.windowHeight = windowHeight
			this.moveX=this.windowWidth-50
			this.moveY=this.windowHeight-70
			this.style=''
		},
		methods: {
			shares(){
				this.$emit('bindShare')
			},
			
			drag_start(event){
				this.start[0]= event.touches[0].clientX-event.target.offsetLeft;
				this.start[1]= event.touches[0].clientY-event.target.offsetTop;
			},
			drag_hmove(event){
					let	 tag 	 = event.touches;
					if(tag[0].clientX < 27 ){
						tag[0].clientX = 27
					}
					if(tag[0].clientY < 27 ){
						tag[0].clientY = 27
					}
					if(tag[0].clientX > this.windowWidth-25 ){
						tag[0].clientX = this.windowWidth-25
					}
					if(tag[0].clientY > this.windowHeight-25 ){
						tag[0].clientY = this.windowHeight-25
					}
					this.moveX	 = tag[0].clientX-this.start[0];
					this.moveY	 = tag[0].clientY-this.start[1];
			}
		}}
</script>
 
<style lang="scss" scoped>
	.holdon{
		width: 100%;
		height: 100%;
		
	}
	.ball>image{
		width: 50rpx;
		height: 50rpx;
	}
	.ball{
		width: 100rpx;
		height: 100rpx;
		background:linear-gradient(to bottom, #F8F8FF,#87CEFA);
		border-radius: 50%;
		box-shadow: 0 0 15upx #87CEFA;
		color: #fff;
		font-size: 40rpx;
		display: flex;justify-content: center;align-items: center;
		position: fixed !important;
		z-index: 1000000;
	}
</style>